<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">

<head>
  <meta charset="utf-8"/>
  <title>gblfy-学习百度搜索</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<style>
    .form-control-es {
        width: 600px;
        margin-top: 50px;
        display: inline;
    }
</style>
<body class="pg">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid" id="app">
    <form class="d-flex">
      <div>
        <input v-model="keyword" class="form-control  form-control-es" placeholder="输入关键字">
        <button @click.prevent="searchKey" type="submit" class="btn btn-primary">百度一下</button>
        </br>
        </br>
        <div v-for="item in results">
          </br>
          <a v-html="item.title"></a>
          </br>
          <a v-html="item.title"></a>
          </br>
        </div>
      </div>
    </form>
  </div>
  </div>
</nav>
<!--前端使用vue实现前后端分离-->
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/vue.min.js}"></script>
<script>

  new Vue({
    el: '#app',
    data: {
      keyword: '',// 搜索关键词
      results: [] //搜索结果数据容器
    },
    methods: {
      searchKey() {
        let keyword = this.keyword;
        console.log(keyword);
        //  对接后端接口
        axios.get('/search/' + keyword + "/1/20").then(res => {
          console.log(res);
          this.results = res.data;//绑定数据
        })
      }
    }
  })
</script>

</body>
</html>